<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="maximum-scale=0.5,minimum-scale=0.5,user-scalable=0,width=device-width,initial-scale=1.0" />
	<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
	<title>意见反馈</title>
	<link rel="stylesheet" type="text/css" href="__CSS__/api.css" />
	<link rel="stylesheet" type="text/css" href="__CSS__/aui.css" />
	<style>
		body {
			background-color: #F6F6F6 !important;
			outline: 0;
			padding-left: 23px;
			padding-right: 23px;
		}

		.outer {
			padding-top: 6px;
		}

		.label {
			display: inline-block;
			margin-top: 28px;
			height: 57px;
			line-height: 57px;
			padding-left: 20px;
			padding-right: 20px;
			color: #B1B1B1;
			font-size: 28px;
			border: 1px solid #DDDDDD;
			border-radius: 7px;
			margin-right: 41px;
		}
		/*.label:nth-child(3n+2){
			margin-right: 41px;
			margin-left: 41px;
		}*/

		.label2 {
			color: #DF4638;
			border: 1px solid #DF4638;
		}

		.outer1 {
			margin-top: 48px;
		}

		.outerr {
			border: 1px solid #DDDDDD;
		}

		.shuzi {
			font-size: 24px;
			color: #999999;
			padding-bottom: 19px;
			text-align: right;
			padding-right: 19px;
			background-color: #FFFFFF;
		}

		.advice {
			background-color: #FFFFFF;
			height: 293px;
			color: #292B38;
			font-size: 28px;
			padding: 20px 24px;
		}

		textarea::-webkit-input-placeholder,
		input::-webkit-input-placeholder {
			color: #B1B1B1;
			font-size: 28px;
		}

		input[type="text"] {
			height: 86px;
			width: 100%;
			background-color: #fff;
			color: #292B38;
			font-size: 28px;
			border: 1px solid #DDDDDD;
		}

		input[type="tel"] {
			height: 86px;
			width: 100%;
			background-color: #fff;
			color: #292B38;
			font-size: 28px;
			border: 1px solid #DDDDDD;
		}

		.submit {
			background: linear-gradient(-127deg,rgba(240,64,64,1),rgba(255,122,122,1));
			height: 92px;
			line-height: 92px;
			color: #FFFFFF;
			font-size: 36px;
			text-align: center;
			border-radius: 11px;
			margin-top: 64px;
		}

		.arrow {
			position: absolute;
			width: 10px;
			height: 18px;
			background: url(__IMG__/right_arrow1.png) no-repeat center center;
			background-size: 10px 18px;
			right: 20px;
			top: 33px;
		}
	</style>
	<style>
		.aui-iconfont {
			position: relative;
			font-family: "aui_iconfont" !important;
			font-size: 1.4rem;
			font-style: normal;
			-webkit-font-smoothing: antialiased;
			-moz-osx-font-smoothing: grayscale;
			height: 4rem;
		}

		.aui-icon-tu{
			height: 4rem;
			width: 49px;
			background: url('__IMG__/left.png') no-repeat center center;
			background-size: 20px 30px;
		}
	</style>
</head>

<body>
<header class="aui-bar aui-bar-nav underLine">
	<a class="aui-pull-left" tapmode="active" onclick="window.history.back(-1);"> <span class="aui-iconfont aui-icon-tu"> </span> </a>
	<div class="aui-title" style="font-size: 1.4rem;line-height: 4rem">意见反馈</div>
</header>
	<div class="outer">

<div id="list"></div>

{volist name='data' id='d'}
<span class="label" onclick="selected(this);" name='{$d.cate_id}'>{$d.cate_name}</span>
{/volist}


	</div>
	<div class="outer1 outerr">
		<textarea maxlength='200' class="advice" placeholder="感谢您提出宝贵的意见，我们的成长离不开您的支持。" id='text001'></textarea>
		<div class="shuzi">(<span id="num1">0</span>/<span id="num2">200</span>)</div>
	</div>

	<div class="outer1" style="position: relative">
		<input type="text" placeholder="留下您的联系方式QQ或者微信号" id='text002' maxlength="25" />
	</div>
	<div class="submit" tapmode onclick="toIntelNet();">提交</div>
</body>
<script type="text/javascript" src="__JS__/jquery.min.js"></script>
<script type="text/javascript">
	function selected(el) {
		if($(el).hasClass('label2')){
		    $(el).removeClass('label2');
		}else{
		    $(el).addClass('label2');
		}
	}
    $('textarea').bind('input propertychange', function() {
        var text = $('#text001').val().trim();
        $('#num1').text(text.length);
    });





	function toIntelNet() {

		var text001 = $('#text001').val();
		var text002 = $('#text002').val();
		var ids = '';
		var all = $('.label2').length;
		if (all <= 0) {
            alert('请选择投诉类型');
			return
		} else if (text001 == '') {
            alert('请输入投诉内容');
			return
		} else if (text001.length > 200) {
            alert('输入内容不能大于200字');
			return
		} else if (text002 == '') {
            alert('请输入联系方式');
			return
		}else{
		    $('.label2').each(function (data,index) {
				ids += $(this).attr('name')+',';
            });
            $.ajax({
                url: '{:url("My/addfeedback")}',
                data: 'type=' + ids + '&content=' + text001 + '&phone=' + text002,//
                type: 'POST',
                dataType: 'JSON',
                success: function (data) {
                    if (data.status == 200) {
                        window.history.back(-1);
                    } else {
                        alert(data.msg)
                    }
                },
                error: function () {
                    alert('Ajax error!');
                }
            })
		}
	}
</script>

</html>
